<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-show="!isShowSet">
      <div class="workmanship_tit">
        <span><i></i>{{ form.title }}</span>
      </div>
      <div class="workmanship_con">
        <div class="box1 clearfix" style="height: 42%;">
          <div class="chartBox_l">
            <img :src="firstData.picURL" class="img"/>
          </div>
          <div class="chartBox_r"
               style="display: flex;align-items: center;justify-content: center;flex-direction: column">
            <p class="p1">功效</p>
            <p class="p1" style="color: white">{{ firstData.gongxiao }}</p>
          </div>
        </div>
        <div class="box1" style="margin-top: 20px;height: 50%;">
          <vue-seamless-scroll
              :data="dataList"
              class="seamless-warp"
              :class-option="classOption"
          >
            <ul class="item">
              <li
                  class="clearfix"
                  v-for="(item, index) in dataList"
                  :key="index"
              >
                <span>{{ item.level }}</span>
                <p class="img"><img :src="item.picURL" alt=""/></p>
                <p class="text text-ellipsis" style="width: 15%">{{ item.name }}</p>
                <p class="text text-ellipsis" style="width: 15%">{{ item.position }}</p>
                <p class="text text-ellipsis" style="width: 23%">工龄{{ item.age }}年</p>
                <p class="text text-ellipsis" style="width: 20%;text-align: right">功效{{ item.gongxiao }}</p>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="workmanship editBox" v-show="isShowSet">
      <span @click="dialogVisible = true">编辑</span>
    </div>
    <el-dialog title="栏目设置"
               v-loading="loading"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="editFrom" label-width="100px" v-loading="loading"
               :element-loading-text="loadingMessage">
        <el-form-item label="栏目标题：">
          <el-input v-model="editFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="数据设置：">
            <div
                class="mb10 clearfix"
                v-for="(item, index) in editFrom.datalist"
                :key="index"
            >
              <el-upload
                  :data="{index}"
                  action="#"
                  list-type="picture-card"
                  :http-request="uploadDetailImg"
                  :before-upload="beforeImgUpload"
                  :show-file-list="false"
                  :multiple="false"
              >
                <img v-if="item.picURL" :src="item.picURL" style="width: 100%;object-fit: cover">
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <el-input v-model="item.name" class="inputDiv" style="width:160px" placeholder="请输入姓名"></el-input>
              <el-input v-model="item.position" class="inputDiv ml10" style="width:120px"
                        placeholder="请输入岗位"></el-input>
              <el-input-number v-model="item.age" controls-position="right" :min="0" :max="99"
                               placeholder="请输入工龄" style="margin-left: 10px"></el-input-number>
              <!--              <el-input v-model="item.gongxiao" class="inputDiv ml10" style="width:120px"-->
              <!--                        placeholder="请选择绩效"></el-input>-->
              <el-select v-model="item.gongxiao" style="width:120px;margin-left: 10px">
                <el-option label="优" value="优"></el-option>
                <el-option label="良" value="良"></el-option>
                <el-option label="差" value="差"></el-option>
              </el-select>
              <i
                  @click="delVariable(index)"
                  class="ml10"
                  style="cursor: pointer; color: #409EFF;}"
              >删除</i>
            </div>
            <el-button type="text" @click="addVariable">+新增一条</el-button>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import {baseRequest, workmanshipRequest} from "@/utils/http/request";

export default {
  data() {
    return {
      firstData: {
        name: "",
        imgURL: "",
        level: "",
        is_delete: '0',
      },
      timer: null,
      dialogVisible: false,
      dataList: [],
      form: {
        datatype: "",
        title: "",//标题
        milieu_e: "",//优
        milieu_g: "",//良
        milieu_b: "",//差
        datalist: [{
          name: "",
          imgURL: "",
          level: "",
          is_update: 0,
          is_delete: 0,
        }],
        // is_delete:0,//判断是否为 删除图片，默认为0，删除条数后改为1
        // is_update:0,//判断是否为 修改图片，默认为0，修改图片后改为1
      },
      editFrom: {},
      checkList: ["优", "良"],
      loading: false,
      loadingMessage: '',
    };
  },

  props: ["isShowSet"],
  components: {vueSeamlessScroll},
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {
    dataList() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }

      this.timer = setInterval(() => {
        let top = document.querySelector('.seamless-warp >div:first-child').style.transform.replace('translate(0px,', '')
        top = top.substring(0, top.length - 3)
        top = parseFloat(top) * -1.0
        if (this.dataList.length > 0)
          if (this.dataList[parseInt(top / 48)]) {
            this.firstData = this.dataList[parseInt(top / 48)]
          }

      }, 100)
    },
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  destroyed() {
    if (this.timer)
      clearInterval(this.timer)
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      workmanshipRequest.getWorkerTeam({
        datatype: "null",
      }).then((res) => {
        if (res.code === "01") {
          this.form = {
            ...res,
            datatype: '0'
          };
          this.dataList = [...this.form.datalist]
          this.form.datalist.forEach(item => {
            item.is_delete = '0'
          })
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    submit(val) {

      let isNotOK = this.editFrom.datalist.some(item => {
        if (!item.picURL || !item.name || !item.position || !item.age || !item.gongxiao) {
          return true
        }
        return false
      })

      if (isNotOK) {
        this.$message.error('请填写完整信息')
        return
      }

      this.loading = true
      workmanshipRequest.setWorkerTeamEdit({
        ...this.editFrom,
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })
    },
    //新增变量
    addVariable() {
      let item = {
        name: "",
        file: "",
        level: "",
        is_delete: '0',
      };
      this.editFrom.datalist.push(item);
    },
    //删除变量
    delVariable(index) {
      this.editFrom.datalist.splice(index, 1);
    },
    uploadDetailImg(data) {
      const index = data.data['index']
      let formData = new FormData()
      formData.append('fileobject', data.file)
      this.loading = true
      this.loadingMessage = '正在上传图片'
      baseRequest.upload(formData).then(res => {
        if (res) {
          this.$set(this.editFrom.datalist[index], 'picURL', res)
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.$refs['form'].validate()
      })
    },
    beforeImgUpload(file) {
      const isJPG = file.type.indexOf('image') > -1;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('请上传图片!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: 100%;
  font-size: 12px;

  .workmanship {
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_right.png) no-repeat;
      height: 29px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      text-align: right;
      padding-right: 8px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_right_btn.png) no-repeat;
          margin-right: 10px;
        }
      }
    }

    .workmanship_con {
      height: calc(100% - 29px);
      overflow-y: auto;

      .box1 {
        height: 46.5%;

        .chartBox_l {
          float: left;
          width: calc(100% - 176px);
          height: 100%;
          position: relative;
          overflow: hidden;

          .img {
            width: 272px;
            height: 153px;
            object-fit: cover;
            margin-top: 13px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }

        .chartBox_r {
          float: right;
          width: 146px;
          margin-left: 30px;
          height: 100%;
          padding-top: 32px;
          font-weight: bold;

          .p1 {
            font-size: 31px;
            color: #43ddff;
            margin-bottom: 10px;
          }

          .p2 {
            font-size: 42px;
            color: #fff;
          }
        }

        .seamless-warp {
          width: 100%;
          height: 100%;
          overflow: hidden;

          ul {
            font-size: 21px;
            color: #42ddff;

            li {
              margin-bottom: 6px;
              position: relative;
              display: flex;
              align-items: center;

              .img {
                width: 96px;
                height: 54px;
                margin-right: 10px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .text {
                float: left;
                line-height: 48px;
                margin-left: 5px;
              }

              span {
                position: absolute;
                right: 0;
              }
            }
          }
        }
      }
    }

    &.editBox {
      background: #384768;
      border: 1px solid #67b1ea;
      color: #6ef7ff;
      font-size: 20px;
      align-items: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      span {
        cursor: pointer;
      }
    }
  }

  .el-upload--picture-card i {
    font-size: 18px;
  }

  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 36px;
    float: left;
  }

  // 隐藏上传组件

  ::v-deep .el-upload--picture-card {
    width: 50px;
    height: 36px;
    line-height: 36px;
    float: left;
    margin-right: 10px;
  }

  .hide {
    ::v-deep .el-upload {
      display: none !important;
    }
  }
}
</style>
